<template>
  <d2-container>
    <template slot="header">部门列表</template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="success" size="mini" @click="handleCreate()">新增部门</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="loading"
        element-loading-text="拼命加载中"
        max-height="400">
        <el-table-column
          fixed
          prop="departId"
          label="编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="departName"
          label="部门名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="departCode"
          label="部门代码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="departShortName"
          label="部门简称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="businessType"
          label="部门类型"
          :formatter="formatDepartType"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="handleEdit(scope.$index, scope.row)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              @click.native.prevent="handleDelete(scope.$index, scope.row)"
              type="text"
              size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="20"
        layout="total, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="90px">
        <el-col :span="12">
          <el-form-item label="部门名称">
            <el-input v-model="form.departName" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门代码">
            <el-input v-model="form.departCode" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门简称">
            <el-input v-model="form.departShortName" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业务指标">
            <el-input v-model="form.businessIndicator" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否实验室">
            <el-select v-model="form.departType" placeholder="" size="mini">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="固定电话">
            <el-input v-model="form.telephone" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传真">
            <el-input v-model="form.fax" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地址">
            <el-input v-model="form.address" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input v-model="form.email" placeholder="" size="mini"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门类型">
            <el-select v-model="form.businessType" placeholder="" size="mini">
              <el-option label="计量部门" value=1></el-option>
              <el-option label="质检部门" value=2></el-option>
              <el-option label="共用部门" value=3></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose()" size="mini">取 消</el-button>
    <el-button type="primary" @click="handleSubmit()" size="mini">确 定</el-button>
  </span>
    </el-dialog>
  </d2-container>
</template>
<script>
import api from '@/api'

export default {
  name: 'os-department-list',
  created () {
    this.getData()
  },
  methods: {
    formatDepartType (row, column) {
      var departMap = {
        1: '计量部门',
        2: '质检部门',
        3: '共用部门'
      }
      return departMap[row[column.property]]
    },
    async getData () {
      this.loading = true
      var data = await api.OA_DEPARTMEN_LIST({
        pageNo: 1,
        pageSize: 10
      })
      this.loading = false
      this.count = data.count
      this.tableData = data.list
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    handleCreate () {
      this.initForm()
      this.dialogVisible = true
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleSubmit () {
      if (this.form.departId) {
        api.OA_DEPARTMEN_EDIT(this.form)
        this.handleClose()
        this.getData()
      } else {
        delete this.form.departId
        api.OA_DEPARTMEN_CRATE(this.form).then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.handleClose()
          this.getData()
        })
      }
    },
    handleEdit (index, row) {
      this.dialogTitle = '编辑部门'
      this.dialogVisible = true
      this.form.departId = row.departId
      this.form.departName = row.departName
      this.form.departCode = row.departCode
      this.form.orderNum = row.orderNum
      this.form.departShortName = row.departShortName
      this.form.businessIndicator = row.businessIndicator
      this.form.departType = row.departType
      this.form.telephone = row.telephone
      this.form.fax = row.fax
      this.form.address = row.address
      this.form.email = row.email
      this.form.businessType = row.businessType
    },
    handleDelete (index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.OA_DEPARTMEN_DELETE({ departId: row.departId }).then(res => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getData()
        }).catch(err => {
          console.log(err)
          this.loading = false
          this.$message.error('公司保存失败，请稍后再试！')
        })
      })
    },
    initForm () {
      this.form.departId = 0
      this.form.departName = ''
      this.form.departCode = ''
      this.form.orderNum = ''
      this.form.departShortName = ''
      this.form.businessIndicator = ''
      this.form.departType = '1'
      this.form.telephone = ''
      this.form.fax = ''
      this.form.address = ''
      this.form.email = ''
      this.form.businessType = '1'
    }
  },
  data () {
    return {
      loading: false,
      dialogTitle: '创建部门',
      dialogVisible: false,
      departId: 0,
      form: {
        departId: 0,
        departName: '',
        departCode: '',
        orderNum: '',
        departShortName: '',
        businessIndicator: '',
        departType: '1',
        telephone: '',
        fax: '',
        address: '',
        email: '',
        businessType: '1'
      },
      tableData: [],
      currentPage: 1,
      count: 0,
      formInline: {
        user: ''
      }
    }
  }
}
</script>
